Playing around with CSS3 is fun, but remembering all those experimental properties with their vendor prefixes, and which browser supports which property is a real bummer. But never fear, CSS3 code generators have it covered. Recently, I’ve found three useful ones.
CSS Border Radius does exactly what it says on the label; it’s a quick way to get the code for the border-radius property for Mozilla-based and WebKit-based browsers, as well as the standard CSS3 syntax. Fill in the radius value and you’re good to go. Likewise, the CSS3 Gradient Generator does the same for generating gradient code. It has a handy form widget for selecting the colors.
CSS3, Please! has a fun interface; it presents you with a sample style sheet where all the values are editable. It covers six properties that all have some support from modern browsers, but it also displays appropriate IE alternatives that use the proprietary filter property, as well as a -ms-filter version for IE8.
I was sent a link to the CSS3 Generator site by Rob Allison. The CSS3 Generator supports nine properties, and provides each one with an individualized form customized for the requirements of each property. It also displays browser icons for browsers that support the property, and the version number at which support for the property begins. Unlike CSS3, Please!, though, it’ll only show IE support if the CSS3 property is supported.
Westciv, makers of Style Master, have a selection of CSS3 code-generating tools in their CSS Sandbox, including a tool for linear gradients, radial gradients, text shadows, box shadows, text stroke, and transforms. Each generator has a handy form interface, a preview, and browser support information.
So, go and have fun!
Andrew TetlawiOS Developer, sometimes web developer and Technical Editor.
